<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path: '/teacher/notices'}">教师</el-breadcrumb-item>
      <el-breadcrumb-item>学生课题管理</el-breadcrumb-item>
      <el-breadcrumb-item>教师发布任务书</el-breadcrumb-item>
    </el-breadcrumb>

    <!--卡片视图区域-->
    <el-card>
      <el-table :data="assignmentList" stripe style="width:1000px;margin:10px 60px">
        <el-table-column align="center" label="序号" width="80" type="index"></el-table-column>
        <el-table-column align="center" label="课题名称" width="400" prop="sub.name"></el-table-column>
        <el-table-column align="center" label="课题类型" width="110">
          <template slot-scope="scope">
            <el-tag>{{scope.row.sub.type.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="课题来源" width="110" >
          <template slot-scope="scope">
            <el-tag type="info">{{scope.row.sub.source.label}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="当前状态" width="110" >
          <template slot-scope="scope">
            <el-tag effect="dark" :type="statusObj[scope.row.assignment.status].type">{{statusObj[scope.row.assignment.status].label}}</el-tag>
          </template>
        </el-table-column> 
        <el-table-column align="center" label="操作" width="190">
          <template slot-scope="scope">
            <el-button type="primary" size="medium" v-if="scope.row.assignment.status > 1" @click="publishAssignment(scope.row.assignment.id)">查看任务书</el-button>
            <el-button type="success" size="medium" v-else @click="publishAssignment(scope.row.assignment.id)">填写任务书</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 底部分页按钮 -->
      <el-pagination
        background style="margin-left:42%"
        :current-page.sync="pageParam.currentPage" 
        :page-size.sync="pageParam.pageSize"
        @current-change="nowPage"
        layout="prev, pager, next"
        :total="total">
      </el-pagination>
  </div>
</template>

<script>
  import {getTeachertAssignmentListByPage, getTeachertAssignmentTotal} from '../../axios/assignment'
  export default {
    name: 'TeacherAssignmentList',
    data() {
      return { 
        // 教师任务书列表
        pageParam:{  currentPage: 1, pageSize: 5 },// 页码参数 
        total: 1, // 所有可选的课题列表的总数  
        assignmentList: [],
        statusObj: {
          1: { type: 'info', label: '未填写' },
          2: { type: 'warning', label: '待审核' },
          3: { type: 'danger', label: '未通过' },
          4: { type: 'success',  label: '已通过' }
        }
      }
    },
    methods: {
      // viewAssignment(assignmentId){
      //   this.$router.push({ path: `/teacher/assignment/view/${assignmentId}`})
      // },
      // 填写任务书
      publishAssignment (assignmentId) {
        this.$router.push({ path: `/teacher/assignment/publish/${assignmentId}`})
      },
      nowPage(page){
        this.pageParam.currentPage = page // 更新当前指向的页码
        this.getAssignmentList()  
      },
      getAssignmentTotal(){
        getTeachertAssignmentTotal().then(res => {
          if(res.success){
            this.total = res.data
          } 
        })
      },
      getAssignmentList(){
        // 有后端，从后端获取教师任务书列表
        getTeachertAssignmentListByPage(this.pageParam).then(res => {
          if(res.success){
            this.assignmentList = res.data
          } 
        })

        // 无后端，模拟数据
      //   let data1 =  {
      //       id: 1, 
      //       status: true,
      //       research: '我是前端的测试数据我是前端测试数据.......',
      //       command: 'JavaEE, SpringBoot, Redis, MySQL, vue, elementUI...',  // 涉及的知识和基本要求
      //       goal: '熟练掌握JavaWeb的相关知识，并了解技术前言框架的使用',
      //       scheduling: '第一周.....第二周....',
      //       attachment: '', // 附件下载地址
      //       publishTime: '2022-01-24', // 发布时间
      //       updateTiime: '2022-01-24', // 提交时间
      //       stu: {id: 6109118001, name: '张三'},
      //       tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
      //       sub: { // 对应毕设课题
      //               id: 1,
      //               name: '前端模拟数据测试',
      //               introduce: '测试测试测试测试测试测试',
      //               declareTime: '2021-01-21',
      //               source: {id: 1, label: '学生自拟'},
      //               type: {id: 1, label: '理论研究'},
      //               status: 1,
      //               stuId: 6109118001, 
      //               teaId: 610911, 
      //             } 
      //     }

      //     let data2 =  {
      //       id: 2, 
      //       status: false,
      //       research: '我是前端的测试数据我是前端测试数据.......',
      //       command: 'JavaEE, SpringBoot, Redis, MySQL, vue, elementUI...',  // 涉及的知识和基本要求
      //       goal: '熟练掌握JavaWeb的相关知识，并了解技术前言框架的使用',
      //       scheduling: '第一周.....第二周....',
      //       attachment: '', // 附件下载地址
      //       publishTime: '2022-01-24', // 发布时间
      //       updateTiime: '2022-01-24', // 提交时间
      //       stu: {id: 6109118002, name: '李四'},
      //       tea: {id: 610911, name: '罗翔老师', job: '讲师', college: '信息工程学院', phone: '18989099909', email: '18989099909@qq.com'},
      //       sub: { // 对应毕设课题
      //               id: 2,
      //               name: '前端模拟数据测试',
      //               introduce: '测试测试测试测试测试测试',
      //               declareTime: '2021-01-21',
      //               source: {id: 1, label: '学生自拟'},
      //               type: {id: 1, label: '理论研究'},
      //               status: 1,
      //               stuId: 6109118002, 
      //               teaId: 610911, 
      //             } 
      //     }
      //     this.assignmentList.push(data1)
      //     this.assignmentList.push(data2)
      }
    },
    created(){
      this.getAssignmentList()
      this.getAssignmentTotal()
    }
  }
</script>

<style>

</style>